<template>
<div class="manage tc">
  <button v-on:click="showAdd">新增</button>
  <div class="input-area" v-show="isAdd">
    <input type="text" placeholder="请输入人员姓名" v-model="name"/>
    <button v-on:click="addName">确定</button>
  </div>
  <table>
    <tr>
      <th>姓名</th>
      <th>操作</th>
    </tr>
    <tr v-for="(item, index) in people">
      <td>{{item.name}}</td>
      <td>
        <span @click="edit(index)">编辑</span>&nbsp;&nbsp;<span @click="del(index)">删除</span>
      </td>
    </tr>
  </table>
  <div class="wrap" v-show="isEdit">
    <div class="content">
      <input type="text" v-model="newName">
      <button @click="cancel">取消</button>
      <button @click="editName">确认</button>
    </div>
  </div>
  <bottom></bottom>
</div>
</template>

<script>
  import Bottom from '@/components/bottom.vue'

  export default {
    components: {
      Bottom
    },
    data(){
      return {
        isNowPage: true,
        isAdd: false,
        isEdit: false,
        people: [{name: 'Jack'},{name: 'Marry'}],
        name: '',
        newName: '',
        editId: -1
      }
    },
    methods: {
      showAdd(){
        this.isAdd = true;
      },
      addName(){
        if (this.name.trim() === ''){
          alert('请输入姓名')
        } else {
          this.people.push({name: this.name});
          this.name = ''
        }
      },
      del(tag){
        this.people.splice(tag, 1)
      },
      edit(index){
        this.isEdit = true;
        this.editId = index;
        this.newName = this.people[index].name
      },
      cancel(){
        this.isEdit = false;
      },
      editName(){
        if (this.newName.trim() === ''){
          alert('请输入姓名');
        } else {
          this.people[this.editId].name = this.newName;
          this.isEdit = false;
        }
      }
    }
  }
</script>

<style scoped>

  .manage>button {width: 200px; background: #41b883; color: white; border: 0; padding: 10px 0; border-radius: 5px; margin-bottom: 10px}
  .input-area input {width: 200px; height: 40px; line-height:40px; margin:20px 0; outline:none; border:1px solid #333; font-size: 18px}
  .input-area button { width:60px; height: 40px; line-height:40px; background-color:#41b883; border: none; border-radius:5px; font-size:16px; color:#fff;}
  table{width:100%; max-width:500px; margin:0 auto; margin-top:20px;}
  th,td{width:100px;}
  tr input{width:100px; height:30px; padding-left:10px; outline:none; border:1px solid #333;}
  .wrap{display:table; position:fixed; top:0; left:0; height:100%; width:100%; background:rgba(0,0,0,.8); z-index: 10;}
  .wrap .content{display:table-cell; vertical-align:middle;}
  .wrap .content input{height: 40px; line-height: 40px; display:block; margin:0 auto; margin-bottom:10px; font-size:16px;}
  .wrap .content button{width:100px; height: 30px; line-height: 30px; background-color:#41b883; border: none; border-radius:5px; font-size:16px; color:#fff;}
</style>
